/* Feed stories keep the same proportions at every desktop width. */
body .tag_stories_on_home { --story-width: 112px; --story-height: 164px; margin-bottom: 16px; }
body .tag_stories_on_home + hr.style-two { display: none; }
body .tag_stories_on_home .tag_stories_mobi { margin: 0; }
body .tag_stories_on_home .tag_stories_mobi .status-list {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px;
  overflow-x: auto; overflow-y: hidden; margin: 0; padding: 2px 1px 4px;
  scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
}
body .tag_stories_on_home .status-list::-webkit-scrollbar { display: none; }
body .tag_stories_on_home .tag_stories_mobi .status-list > li {
  position: relative; flex: 0 0 var(--story-width); width: var(--story-width);
  min-width: var(--story-width); height: var(--story-height); margin: 0; padding: 0;
  border: 0; border-radius: 12px; background: var(--claude-surface, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,.18); scroll-snap-align: start; overflow: hidden;
}
body .tag_stories_on_home .tag_stories_mobi .status-list > li.story_empty { display: none; }
body .tag_stories_on_home .tag_stories_mobi .status-list li a {
  display: block; height: 100%; padding: 0; border-radius: 12px; overflow: hidden;
  background: var(--claude-input, #f0f2f5); box-shadow: none;
}
body .tag_stories_on_home .tag_stories_mobi .status-list li a > img {
  inset: 0; width: 100%; height: 100%; padding: 0; border-radius: 0;
  object-fit: cover; transition: transform .2s ease;
}
body .tag_stories_on_home .status-list li a:hover > img { transform: scale(1.025); }
body .tag_stories_on_home .tag_stories_mobi .status-list li a::after {
  height: 60%; border-radius: 0; background: linear-gradient(transparent, rgba(0,0,0,.62));
}
body .tag_stories_on_home .tag_stories_mobi .status-list li span {
  top: 10px; left: 10px; right: auto; bottom: auto; transform: none;
  width: 36px; height: 36px; padding: 3px; background: var(--claude-surface, #fff);
  border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
body .tag_stories_on_home .tag_stories_mobi .status-list li.not_seen_story span { background: #0866ff; }
body .tag_stories_on_home .status-list li span img { object-fit: cover; }
body .tag_stories_on_home .tag_stories_mobi .status-list li p {
  position: absolute; bottom: 10px; left: 9px; right: 9px; z-index: 2;
  margin: 0; font-size: 13px; line-height: 17px; font-weight: 600; text-align: start;
  color: #fff; white-space: normal; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
body .tag_stories_on_home .tag_stories_mobi .status-list li.create_new a { background: var(--claude-surface, #fff); }
body .tag_stories_on_home .tag_stories_mobi .status-list li.create_new a > img { height: calc(100% - 52px); }
body .tag_stories_on_home .tag_stories_mobi .status-list li.create_new a::after { display: none; }
body .tag_stories_on_home .tag_stories_mobi .status-list li.create_new span {
  width: 40px; height: 40px; top: calc(100% - 72px); left: 50%; transform: translateX(-50%);
  padding: 4px; background: #0866ff; color: #fff; border: 4px solid var(--claude-surface, #fff) !important; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
}
body .tag_stories_on_home .tag_stories_mobi .status-list li.create_new a svg {
  width: 24px; height: 24px; padding: 0; border: 0 !important; border-radius: 0;
  color: #fff; background: transparent !important; flex-shrink: 0;
}
body .tag_stories_on_home .tag_stories_mobi .status-list li.create_new p {
  display: flex; align-items: center; justify-content: center; min-height: 32px;
  bottom: 2px; left: 4px; right: 4px; color: var(--claude-text, #050505);
  text-align: center; text-shadow: none; font-size: 12px; line-height: 15px;
}
body .tag_stories_on_home .view-more-stories { width: 36px; height: 36px; right: -12px; padding: 6px; background: var(--claude-surface, #fff); color: var(--claude-muted, #65676b); }

/* One engagement row: actions and counts on the left, reactions on the right. */
.post .hangout-post-footer {
  display: flex; align-items: center; gap: 8px; position: relative;
  min-height: 52px; margin: 0 -15px; padding: 4px 16px;
  color: var(--claude-muted, #65676b); background: var(--claude-surface, #fff);
}
.hangout-engagement-actions, .hangout-like-action { display: flex; align-items: center; gap: 4px; min-width: 0; }
.hangout-engagement-actions { gap: 14px; margin-inline-end: auto; flex-wrap: wrap; }
.post .hangout-post-footer button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; border: 0; border-radius: 6px; min-height: 40px; padding: 4px 3px;
  font-family: inherit; font-size: 14px; font-weight: 500;
  line-height: 1.2; color: inherit; background: transparent; cursor: pointer; white-space: nowrap;
  box-shadow: none; text-transform: none; font-variant-numeric: tabular-nums;
}
.post .hangout-post-footer button:hover { background: var(--claude-input, #f0f2f5); }
.post .hangout-post-footer button:disabled { opacity: .5; cursor: default; }
.post .hangout-post-footer :focus-visible { outline: 2px solid #0866ff; outline-offset: 2px; }
.hangout-post-footer .hangout-engagement-button svg { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; padding: 0; border-radius: 0; background: none; }
.post .hangout-post-footer .stat-item { width: auto; margin: 0; padding: 0; min-width: 0; }
.hangout-post-footer .wo-reaction-post { position: relative; }
.hangout-post-footer .like-btn, .hangout-post-footer [id="like-button"], .hangout-post-footer [id="wonder-button"] {
  display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 40px;
  border-radius: 6px; font-size: 0; color: var(--claude-muted, #65676b); cursor: pointer;
}
.hangout-post-footer .like-btn:hover { background: var(--claude-input, #f0f2f5); }
.hangout-post-footer .tag_post_react_btn > span {
  display: flex; align-items: center; font-size: 0; color: inherit !important;
}
.hangout-post-footer .tag_post_react_btn > span > *, .hangout-post-footer [id="like-button"] > * { display: none !important; }
.hangout-post-footer .tag_post_react_btn > span::before, .hangout-post-footer [id="like-button"]::before {
  content: ''; display: block; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: url('../reaction/premium-thumb-outline.svg') center / contain no-repeat;
  mask: url('../reaction/premium-thumb-outline.svg') center / contain no-repeat;
}
.hangout-post-footer .tag_post_react_btn > span.active-like::before,
.hangout-post-footer [id="like-button"]:has(.active-like)::before { background: #0866ff; }
.hangout-post-footer .hangout-footer-reactions { display: inline-flex; align-items: center; flex-shrink: 0; margin: 0; }
.hangout-post-footer .hangout-footer-reactions .how_many_reacts { display: none; }
.hangout-post-footer .hangout-footer-reactions > .how_reacted { width: 24px; height: 24px; margin-inline-start: -4px; border: 2px solid var(--claude-surface, #fff); padding: 0; background-color: var(--claude-surface, #fff); }
.hangout-post-footer .hangout-footer-reactions > .how_reacted:first-child { margin-inline-start: 0; }
.hangout-post-footer .hangout-footer-reactions > .how_reacted:nth-child(n+4) { display: none; }
.hangout-post-footer .hangout-video-views { display: inline-flex; gap: 3px; align-items: center; font-size: 12px; white-space: nowrap; }

/* Original vector reactions: the same artwork in the picker and count badges. */
.reactions-box .reaction[data-reaction="Like" i], .how_reacted.like-btn-1, .tag_check_who_how_react[data-reaction="Like" i], .wo_who_react_this:has(.emoji--like) { --reaction-art: url('../reaction/premium-like.svg'); }
.reactions-box .reaction[data-reaction="Love" i], .how_reacted.like-btn-2, .tag_check_who_how_react[data-reaction="Love" i], .wo_who_react_this:has(.emoji--love) { --reaction-art: url('../reaction/premium-love.svg'); }
.reactions-box .reaction[data-reaction="Haha" i], .how_reacted.like-btn-3, .tag_check_who_how_react[data-reaction="Haha" i], .wo_who_react_this:has(.emoji--haha) { --reaction-art: url('../reaction/premium-haha.svg'); }
.reactions-box .reaction[data-reaction="Wow" i], .how_reacted.like-btn-4, .tag_check_who_how_react[data-reaction="Wow" i], .wo_who_react_this:has(.emoji--wow) { --reaction-art: url('../reaction/premium-wow.svg'); }
.reactions-box .reaction[data-reaction="Sad" i], .how_reacted.like-btn-5, .tag_check_who_how_react[data-reaction="Sad" i], .wo_who_react_this:has(.emoji--sad) { --reaction-art: url('../reaction/premium-sad.svg'); }
.reactions-box .reaction[data-reaction="Angry" i], .how_reacted.like-btn-6, .tag_check_who_how_react[data-reaction="Angry" i], .wo_who_react_this:has(.emoji--angry) { --reaction-art: url('../reaction/premium-angry.svg'); }
.reactions-box .reaction[data-reaction="Care" i], .how_reacted:has(img[alt="Care" i]), .tag_check_who_how_react[data-reaction="Care" i] { --reaction-art: url('../reaction/premium-care.svg'); }
.reactions-box .reaction[data-reaction]::before { background-image: var(--reaction-art); }
.reactions-box .reaction:is([data-reaction="Like" i],[data-reaction="Love" i],[data-reaction="Haha" i],[data-reaction="Wow" i],[data-reaction="Sad" i],[data-reaction="Angry" i],[data-reaction="Care" i]) > * { display: none !important; }
.reactions-box .reaction:is([data-reaction="Like" i],[data-reaction="Love" i],[data-reaction="Haha" i],[data-reaction="Wow" i],[data-reaction="Sad" i],[data-reaction="Angry" i],[data-reaction="Care" i])::before {
  content: ''; display: block; width: 44px; height: 44px; background-size: contain;
  background-position: center; background-repeat: no-repeat; filter: none;
}
.like-emo > .how_reacted:is(.like-btn-1,.like-btn-2,.like-btn-3,.like-btn-4,.like-btn-5,.like-btn-6,:has(img[alt="Care" i])) {
  background-image: var(--reaction-art); background-position: center; background-size: contain; background-repeat: no-repeat;
}
.like-emo > .how_reacted:is(.like-btn-1,.like-btn-2,.like-btn-3,.like-btn-4,.like-btn-5,.like-btn-6,:has(img[alt="Care" i])) > * { visibility: hidden; }
.who_react_modal { gap: 4px; }
.who_react_modal .tag_check_who_how_react[data-reaction] { display: inline-flex; align-items: center; justify-content: center; padding: 12px 8px; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; }
.who_react_modal .tag_check_who_how_react.active { border-bottom-color: #0866ff; background: var(--claude-blue-soft, #e7f3ff); }
.who_react_modal .tag_check_who_how_react:has(.emoji), .who_react_modal .tag_check_who_how_react:has(img) { font-size: 0; }
.who_react_modal .tag_check_who_how_react:is([data-reaction="Like" i],[data-reaction="Love" i],[data-reaction="Haha" i],[data-reaction="Wow" i],[data-reaction="Sad" i],[data-reaction="Angry" i],[data-reaction="Care" i]) > * { display: none; }
.who_react_modal .tag_check_who_how_react:is([data-reaction="Like" i],[data-reaction="Love" i],[data-reaction="Haha" i],[data-reaction="Wow" i],[data-reaction="Sad" i],[data-reaction="Angry" i],[data-reaction="Care" i])::before { content: ''; width: 28px; height: 28px; background: var(--reaction-art) center / contain no-repeat; }
.wo_who_react_this:has(.emoji) { background: var(--reaction-art) center / contain no-repeat; }
.wo_who_react_this:has(.emoji) > * { visibility: hidden; }
@media (max-width: 600px) {
  body .tag_stories_on_home { --story-width: 104px; --story-height: 156px; }
  body .tag_stories_on_home .tag_stories_mobi { margin: 0 -8px; }
  body .tag_stories_on_home .tag_stories_mobi .status-list { padding-inline: 8px; }
  .post .hangout-post-footer { padding-inline: 10px; gap: 4px; min-height: 48px; }
  .hangout-engagement-actions { gap: 8px; }
  .post .hangout-post-footer button { font-size: 13px; gap: 5px; }
  .hangout-post-footer .hangout-engagement-button svg { width: 22px; height: 22px; flex-basis: 22px; }
  .hangout-post-footer .hangout-footer-reactions > .how_reacted { width: 22px; height: 22px; }
  .reactions-box .reaction[data-reaction]::before { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  body .tag_stories_on_home .status-list li a > img, .reactions-box .reaction { transition: none; }
  body .tag_stories_on_home .status-list li a:hover > img, .reactions-box .reaction:hover { transform: none; }
}